<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    class="form-add"
    fullscreen
    :visible.sync="visible"
  >
    <ng-form-design
      :template.sync="dataForm.templateData"
      ref="formDesign"
      :config="formConfig"
      :reder="false"
    >
      <template slot="formName">
        <el-input
          v-model="dataForm.name"
          class="model-name"
          placeholder="模板名称"
        >
          <template slot="prepend">模板名称</template>
        </el-input>
      </template>
      <template slot="controlButton">
        <el-button
          type="text"
          size="medium"
          icon="el-icon-coin"
          :disabled="isOnSubmit"
          @click="dataFormSubmit()"
          >保存</el-button
        >
      </template>

      <template slot="form-extend-properties" slot-scope="{ data }">
        <FormList :list="data.list" :config="data.config" />
      </template>
    </ng-form-design>

    <!--  <span slot="footer" class="dialog-footer" v-loading="isOnSubmit">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" :disabled="isOnSubmit">确定</el-button>
    </span> -->
  </el-dialog>
</template>

<script>
import FormList from "./formList";
import { getInfo, saveOrUpdate } from "@/api/form/template";
import { getAll as getDictAll } from "@/api/sys/dict";
export default {
  components: {
    FormList,
  },
  data() {
    return {
      visible: false,
      isOnSubmit: false,
      dataForm: {
        id: null,
        code: "",
        name: "",
        templateData: null,
        status: 0,
      },
      dataRule: {
        name: [
          { required: true, message: "模板名称不能为空", trigger: "blur" },
        ],
      },
      formConfig: {
        // 动态表单配置项
        dict: [], // 数据字典配置
      },
    };
  },

  methods: {
    init(id) {
      this.dataForm.id = id;
      this.isOnSubmit = false;
      getDictAll()
        .then(({ data }) => {
          if (data && data.code === 0) {
            this.formConfig.dict = data.data;
          }
        })
        .finally(() => {
          this.visible = true;
        });
      this.$nextTick(() => {
        if (this.dataForm.id) {
          getInfo(this.dataForm.id).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm.code = data.data.code;
              this.dataForm.name = data.data.name;
              if (data.data.templateData) {
                this.dataForm.templateData = JSON.parse(data.data.templateData);

                //this.$refs.formDesign.initModel(this.dataForm.templateData)
              }
              this.dataForm.status = data.data.status;
            }
          });
        } else {
          this.dataForm.templateData = null;
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      // 获取表单数据
      this.dataForm.templateData = this.$refs.formDesign.getModel();
      if (!this.dataForm.name) {
        this.$message.error("表单名称不能为空");
        return;
      }

      const form_ = JSON.stringify(this.dataForm.templateData);

      this.isOnSubmit = true;

      const postData = {
        id: this.dataForm.id || undefined,
        name: this.dataForm.name,
        templateData: form_,
      };

      saveOrUpdate(postData)
        .then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 500,
            });
            this.visible = false;
            this.$emit("refreshDataList");
          } else {
            this.$message.error(data.msg);
          }
        })
        .finally(() => {
          this.isOnSubmit = false;
        });
    },
  },
};
</script>
<style lang="scss">
.form-add {
  .el-dialog__body {
    padding: 5px;
    height: 100%;
  }

  .model-name {
    width: 300px;
  }
}
</style>
